<template>
  <div>
    <div class="box">
      <div class="content">
        <label for="name">收件人</label>
        <input type="text" id="name" v-model="address.name" placeholder="请输入收件人姓名">
      </div>
      <div class="content">
        <label for="tel">联系方式</label>
        <input type="text" id="tel" v-model="address.tel" placeholder="请输入手机号">
      </div>
      <div class="content">
        <label for="area">所在地区</label>
        <input type="text" id="area" v-model="address.area" @click="choose" placeholder="请输入所在地区">
        <div class="divwrap">
          <div class="mask" v-show="show" @click="choose"></div>
          <v-distpicker type="mobile" v-show="show" class="distp"
          @province="onChangeProvince"
          @city="onChangeCity"
          @area="onChangeArea"
          :province="addressInfo.province"
          :city="addressInfo.city"
          :area="addressInfo.area"></v-distpicker>
        </div>

      </div>
      <div class="content">
        <label for="detail">详细地址</label>
        <input type="text" id="detail" v-model="address.detail" placeholder="请输入详细地址">
      </div>
      <button class="mui-btn mui-btn-primary" @click="saveAddress">确 认</button>
      <button class="mui-btn mui-btn-danger" v-show="id" @click="delAddress">删 除</button>
    </div>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker'
export default {
components: { 'v-distpicker': VDistpicker },
props: ['id'],
data() {
    return {
      address: {
        name: '',
        tel: '',
        area: '',
        detail: ''
      },
      show: false,
      addressInfo: {}
    }
  },
  created() {
    this.editAddress()
  },
  methods: {
    // 保存地址
    saveAddress() {
      // 检查内容有无输入
      if (this.address.name === '') {
        this.$toast('收件人不能为空')
        return 
      }
      if (this.address.tel === '') {
        this.$toast('联系方式不能为空')
        return 
      }
      if (this.address.area === '') {
        this.$toast('所在地区不能为空')
        return 
      }
      if (this.address.detail === '') {
        this.$toast('详细地址不能为空')
        return 
      }
      // 没有id是添加，有id是修改, id是通过路由props传来的
      this.address.id = this.id
      this.$http.post('address/save', this.address).then(res => {
        if(res.data.code === 1) {
          this.$toast(res.data.msg)
          this.$router.go(-1)
        } else if (res.data.code === 2) {
          // 没有登录，导航到登录界面
          this.$router.push('/user/login')
        } else {
          this.$toast(res.data.msg)
        }
      })
    },
    // 编辑功能 回想数据
    editAddress() {
      // 有id才能编辑
      if (!this.id) {
        return 
      }
      this.$http.get('address/edit',{params: {id: this.id}}).then(res => {
        if(res.data.code === 1) {
          this.address = res.data.data
        } else if (res.data.code === 2) {
          // 没有登录，导航到登录界面
          this.$toast('您还未登录')
          this.$router.push('/user/login')
        } else {
          this.$toast('数据获取失败')
        }
      })
    },
    // 删除地址
    delAddress() {
      this.$http.post('address/del', {id: this.id}).then(res => {
        if(res.data.code === 1) {
          this.$router.go(-1)
          this.$toast(res.data.msg)
        } else if (res.data.code === 2) {
          // 没有登录，导航到登录界面
          this.$toast('您还未登录')
          this.$router.push('/user/login')
        } else {
          this.$toast('删除失败')
        }
      })
    },
    choose() {
      this.show = !this.show
    },
    onChangeProvince(data) {
      this.addressInfo.province = data.value
    },
    onChangeCity(data) {
      this.addressInfo.city = data.value
    },
    onChangeArea(data) {
      this.addressInfo.area = data.value
      this.address.area = this.addressInfo.province + '-' + this.addressInfo.city + '-' + this.addressInfo.area
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 5px 0 10px 15px; 
  .content {
    border-bottom: 1px solid #ccc;
    label {
      display: inline-block;
      width: 20%;
      color: #999;
    }
    input {
      width: 80%;
      margin-bottom: 0;
      font-size: 14px;
      border: 0;
    }
  }
  .mui-btn {
    width: 80%;
    height: 40px;
    margin-left: calc(10% - 15px);
    margin-top: 40px;
    border-radius: 10px;
    font-size: 16px;
  }
  .divwrap {
    .mask {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: #000;
      opacity: .5;
    }
    .distp {
      position: fixed;
      left: 0;
      bottom: 0;
      height: 300px;
      width: 100%;
      color: #999;
      background-color: #fff;
      border-top: 1px solid #ccc;
      overflow-y: auto;
    }
  }
}
</style>